<template>
  <div class="home-nav-right">
    <div @click="backTop" v-if="backTopVisible">
      <div class="home-nav-item !bg-[#000] opacity-40 hover:opacity-80">
        <GIcon name="gt-plane-Topping-white" class="home-nav-icon" size="16px" />
      </div>
    </div>
    <d-tooltip position="left">
      <a class="home-nav-link">
        <div class="home-nav-item !bg-[#000] opacity-40 hover:opacity-80">
          <img class="home-nav-icon inline" src="@/assets/img/icon/plane-email.svg"/>
        </div>
      </a>
      <template #content>
        <div class="home-nav-tooltip-wrapper">
          <div class="home-nav-text">【用户反馈通道】您的诉求和建议可直接邮件kefu@gitcode.com进行反馈</div>
        </div>
      </template>
    </d-tooltip>

    <d-tooltip position="left">
      <a class="home-nav-link" :href="`${PrefixEmail}${contact}`">
        <div class="home-nav-item !bg-[#000] opacity-40 hover:opacity-80">
          <GIcon name="gt-plane-organization-white" class="home-nav-icon" size="16px" />
        </div>
      </a>
      <template #content>
        <div class="home-nav-tooltip-wrapper">
          <div class="home-nav-text">
            如需组织入驻支持可邮件联系：<a class="home-nav-link devui-link-light" :href="`${PrefixEmail}${contact}`">{{ contact }}</a>
            ，请在正文附带组织介绍及联系方式哦~
          </div>
        </div>
      </template>
    </d-tooltip>

    <d-popover v-if="popVisible" :offset="OffsetOptions" :position="['left']" class="no-arrow" :is-open="popVisible">
      <div class="home-nav-link">
        <div class="home-nav-item !bg-[#000] opacity-40 hover:opacity-80">
          <GIcon name="gt-plane-smile-white" class="home-nav-icon"  size="16px" />
        </div>
      </div>
      <template #content>
        <div class="g-card px-5 pt-4 pb-5 w-[410px]" >
          <div class="opinion-box" v-if="process">
            <div class="tab-step">
              <div
              v-for="item in opinionStep"
              :key="item.index"
              class="tab-item w-8 h-1 mr-1 cursor-pointer"
              :class="opStep===item.index?'bg-G900':'bg-G400'"
              @click="swTab(item)"
              ><span class="cursor-pointer"></span></div>
            </div>
            <div class="">
              <div v-if="opStep === 0" class="rate relative overflow-hidden">
                <div v-if="rateActive!==null || rateNow!==null" class="absolute top-0 right-0 text-G900"><span>{{ rateIcon[rateActive === null?rateNow:rateActive].title }}</span></div>
                <div class="font-[600] text-G900 mt-3 text-sm leading-[20px]"><span>评价您对我们产品的体验</span></div>
                <div class="flex gap-1 items-center mt-3">
                  <div
                  v-for="ico in rateIcon"
                  :key="ico.name"
                  class="opinion-item cursor-pointer border border-G300 rounded-[3px] px-2 py-1.5"
                  :class="{active:rateNow===ico.index}"
                  @mouseover="activeOp(ico.index)"
                  @mouseleave="activeOp(null)"
                  @click="selOpini(ico)"
                  ><GIcon :name="ico.name" size="24px"/></div>
                </div>
              </div>
              <div v-if="opStep === 1" class="Opinion relative overflow-hidden">
                <div v-if="rateNow!==null" class="absolute top-0 right-0 text-G900"><span>{{ rateIcon[rateNow].title }}</span></div>
                <div class="font-[600] text-G900 mt-3 text-sm leading-[20px]"><span>有什么可以改进的吗？</span></div>
                <div class="mt-3">
                  <d-textarea v-model="opinionText" :rows="4" placeholder="请输入反馈（可选）" show-count maxlength="200"></d-textarea>
                </div>
                <div>
                  <d-button color="primary" variant="solid" @click="handleSubmit">提交</d-button>
                </div>
              </div>
            </div>
          </div>
          <div class="finish flex items-center" v-else>
            <div class="flex justify-center items-center w-[30px] h-[30px] rounded-[50%] bg-[#0EB07B]">
              <GIcon name="gt-success" size="14px" color="#fff"/>
            </div>
            <div class="ml-2 font-[600] text-G900 text-sm leading-[20px]"><span>谢谢您的反馈！</span></div>
          </div>
        </div>
      </template>
    </d-popover>
  </div>
</template>

<script setup lang="ts">
import { useReport } from '@/composables/hooks/useReport';
const gitcodeNet = 'https://gitcode.net';
const helpDoc = 'https://docs.gitcode.com';
const reportBug = 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/issues';
const contact = 'kefu@gitcode.com';
const PrefixEmail = 'mailto:';
const opinionStep = [{ index: 0, offset_x: -30 }, { index: 1, offset_x: -80 }];
const opStep = ref<number>(0);
const rateNow = ref(null);
const rateActive = ref(null);
const process = ref(true);
const popVisible = ref(true);
const opinionText = ref<string>('');
const rateIcon = [
  { name: 'gt-nps-1', title: '非常好', index: 0 },
  { name: 'gt-nps-2', title: '好', index: 1 },
  { name: 'gt-nps-3', title: '一般', index: 2 },
  { name: 'gt-nps-4', title: '不好', index: 3 },
  { name: 'gt-nps-5', title: '非常不好', index: 4 }
];
const store:any = localStorage.getItem('spmStatus');
const status = store ? JSON.parse(store) : null;
if (status !== null) {
  const { nps_global } = status;
  popVisible.value = nps_global.expire && nps_global.expire < Date.now();// 过期后才能重新展示
}
const swTab = (item:any) => { // 切换步骤
  if (rateNow.value === null && item.index === 1) return;
  OffsetOptions.crossAxis = item.offset_x;
  opStep.value = item.index;
  window.dispatchEvent(new Event('resize'));// 触发更新位置
};
const activeOp = (index:any) => { // hover等级
  rateActive.value = index;
};
const selOpini = (item:any) => { // 设置等级
  rateNow.value = item.index;
  swTab(opinionStep[1]);
};
const OffsetOptions = reactive({ mainAxis: 10, crossAxis: -30 });
const handleSubmit = () => { // 提交意见
  useReport('nps_global', {
    nps_score: rateNow.value as any + 1,
    nps_comment: opinionText.value
  }).then(res => {
    process.value = false;
    OffsetOptions.crossAxis = 0;
    window.dispatchEvent(new Event('resize'));// 触发更新位置
    const nextStatus = status || {};
    nextStatus.nps_global = { expire: Date.now() + 86400000 * 15 };// 记录提交的过期时间
    localStorage.setItem('spmStatus', JSON.stringify(nextStatus));
    setTimeout(() => { popVisible.value = false; }, 500);
  });
};

// 回到顶部
const backTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

// 是否显示回到顶部按钮
const backTopVisible = ref(false);
const handleScroll = () => {
  backTopVisible.value = window.scrollY > 300;
};
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});

</script>

<style scoped lang="scss">
.home-nav-right {
  position: fixed;
  right: 16px;
  bottom: 64px;
  z-index: 20;
  @media screen and (max-width: 768px) { // 小屏不显示工具栏
    display: none;
  }
  .home-nav-item {
    margin-top: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    box-shadow: 0 2px 6px 0 rgba(37, 43, 58, 0.12);
    .home-nav-icon {
      color: rgba(0, 0, 0, 0.5) !important;
    }
    &:hover {
      cursor: pointer;
      .home-nav-icon {
        color: rgba(0, 0, 0, 1) !important;
      }
    }
  }
}
.home-nav-tooltip-wrapper {
  padding: 6px 12px;
  max-width: 190px;
  font-size: 12px;
  line-height: 18px;
  @apply whitespace-normal break-all;
}
.home-nav-link {
  color: rgba(59, 130, 246, 1);
  cursor: pointer;
}
.opinion-box{
  display: flex;
  flex-direction: column;
  .tab-step{
    display: flex;
    .tab-item{
      border-radius: 2px;
      position: relative;
      span{
        width: 100%;
        height: 12px;
        position: absolute;
        top: -4px;
        left: 0;
        z-index: 1;
      }
    }
  }
  .rate{
    .opinion-item{
      width: 40px;
      height: 36px;
      &:hover,&.active{
        background:var(--color-B500);
        border-color: transparent;
        .icon{color: #fff !important;}
      }
    }
  }
}
</style>
<style lang="scss">
.no-arrow{
  &.devui-popover__content.devui-flexible-overlay{
    background: transparent;
    padding: 0;
    border:none;
    box-shadow: none;
  }
  .devui-flexible-overlay__arrow{
    display: none !important;
  }
}
</style>
